<@master template="master/master-crm" title="客户管理">

<div class="header">
    	<i class="backIco"></i>
    	客户管理
        <a href="/customer/add" class="topPr">新增</a>
    </div>
    <div class="bgF mt20 b_t1 mt100">
    	<div class="dtList pb20">
        	<ul>
                <li><span class="w180 tar mr10 fs26 c666">客户姓名</span><input placeholder="请输入客户姓名" type="text" name="customer_name" id="customer_name" class="dtinput"></li>
                <li><span class="w180 tar mr10 fs26 c666">手机号码</span><input placeholder="请输入手机号码" type="text" name="mobile" id="mobile" class="dtinput"></li>
            </ul>
            <a href="javascript:void(0)" class="dtcxBtn mt20 find">查 询</a>
        </div>
    </div>
    <div class="bgF mt20 b_t1">
    	<div class="keglSpan">
            <span class="w150">姓名</span>
            <span class="w200">手机号</span>
            <span class="w280">客户分类</span>
        </div>  
        <div class="dtkhList">
          <ul class="dataUI">  </ul>
        </div>
         <div class="tac mt20 more">点击查看更多>></div>
        
   </div>
<@js>

/*初始化*/
var counter = 0; /*计数器*/
var pageSize = 10; /*每页显示的数量*/
$(function(){
    
    /*首次加载*/
    getData(counter, pageSize);
    
});

function getData(counter,pageSize){
   var customer_name=$("#customer_name").val();
   var mobile=$("#mobile").val();
    $.ajax({
        type: 'GET',
        url: 'customer/customerRest/getCustomerData',
        dataType: 'json',
        data:{pageSize:pageSize,showPage:counter,customer_name:customer_name,mobile:mobile},
        success: function(reponse){
    
            var datas = reponse.data;
            var sum = datas.pageTotal;
            var data = datas.data;
            var returnDataSize = datas.returnDataSize;
          
            var result = '';
            /****业务逻辑块：实现拼接html内容并append到页面*********/
            
            /*使用for,从 0到返回的条数循环*/
            for(var i=0; i< returnDataSize; i++){
            	var ahref = "/customer/toCustomerManageInfo?customerId="+data[i].customerId;
                result +='<a style="color:black;" href="'+ahref+'">'+
                	'<li><span class="w150">'+data[i].customerName+ 
                    '</span><span class="w200">'+ data[i].mobileNumber +                     
                    '</span> <span class="w280"><i class="mr5">'+data[i].customerSort+'</i></span></li></a>';
            }
              
            $('.dataUI').append(result);
            
            /*******************************************/
    
            /*隐藏more按钮*/
            if ( counter>= sum-1){
                $(".more").hide();
            }else{
                $(".more").show();
            }
        },
        error: function(xhr, type){
            alert('Ajax error!');
        }
    });
}

  /*监听加载更多*/
    $(document).on('click', '.more', function(){
        counter ++;
        getData(counter, pageSize);
    });
    
     /*监听查询*/
    $(document).on('click', '.find', function(){
     $('.dataUI').empty();
       counter=0;
        getData(0, pageSize);
    });
</@js>
</@master>
